.drawer-wrap {
  :global {
    .ant-drawer-body {
      padding: 0;
    }
  }
}
.menu-custom-height {
  height: 300px;
  overflow-y: auto;
}
.device-type-item {
  background: #fff;
  height: 100px;
  box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
  border-radius: 4px;
  text-align: center;
  line-height: 100px;
  font-size: 15px;
  position: relative;
  -webkit-user-select: none;

  -moz-user-select: none;

  -ms-user-select: none;

  user-select: none;
  cursor: pointer;
  font-weight: 500;
  &::before {
    width: 100%;
    height: 70px;
    border: 5px solid #16ba3c;
    content: '';
    position: absolute;
    left: 0;
    top: 15px;
    border-bottom-color: transparent;
    border-top-color: transparent;
  }
  &:hover,
  &:focus {
    background: #16ba3c;
    color: #fff;
    &::before {
      border-left-color: #fff;
      border-right-color: #fff;
    }
  }
  &.active {
    background: #16ba3c;
    color: #fff;
    &::before {
      border-left-color: #fff;
      border-right-color: #fff;
    }
  }
}
.no-data {
  color: #b7b7b7;
}
.empty-wrap {
  box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
  background: #fff;
}
.test-wrap {
  background: #fff;
  border-radius: 4px;
  height: 100%;
  box-shadow: 0 1px 4px rgba(0, 21, 41, 0.1);
  padding: 6px;
  position: relative;
  .scale-bar {
    position: absolute;
    left: 0;
    top: calc(60% - 5px);
    width: calc(100% - 6px);
    height: 6px;
    margin: 0 6px;
    background-color: #fff;
    cursor: all-scroll;
  }
  .top,
  .bottom {
    box-shadow: inset 0 0px 4px rgba(0, 21, 41, 0.12);
    background-color: #f5f5f5;
    height: calc(60% - 3px);
    overflow-y: auto;
  }
  .bottom {
    height: calc(40% - 3px);
  }

  .list-wrap,
  .result-wrap {
    padding: 8px;
    height: 100%;
  }
  // .result-wrap {
  //   box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
  //   border-radius: 4px;
  //   height: 100%;
  //   background-color: #fff;
  // }

  .table-wrap {
    height: calc(100% - 66px);
    .table-tbody {
      .table-tbody-tr {
        position: relative;
        &::before {
          position: absolute;
          left: 0px;
          top: 7px;
          width: 0;
          height: 36px;
          border: 5px solid transparent;
          border-left: 5px solid #16ba3c;
          content: '';
        }
        margin-bottom: 8px;
        height: 42px;
        background: #fff;
        border-radius: 4px;
        box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
        line-height: 42px;
        .tr-name {
          text-align: center;
          .num {
            color: #00a0e9;
          }
        }
        .operation {
          .flow {
            :global {
              .ant-btn {
                border: 1px solid #7c5023;
                background-color: #fff;
                color: #7c5023;
                &:hover,
                &:focus {
                  color: #fff;
                  background-color: #7c5023;
                  border-color: #7c5023;
                }
              }
            }
          }
          .rest {
            :global {
              .ant-btn {
                border: 1px solid #00a0e9;
                background-color: #fff;
                color: #00a0e9;
                &:hover {
                  color: #fff;
                  background-color: #00a0e9;
                  border-color: #00a0e9;
                }
                &:focus {
                  color: #fff;
                  border-color: #00a0e9;
                  background-color: #00a0e9;
                }
              }
            }
          }
          .upload {
            :global {
              .ant-btn {
                border: 1px solid #16ba3c;
                background-color: #fff;
                color: #16ba3c;
                &:hover {
                  color: #fff;
                  background-color: #16ba3c;
                  border-color: #16ba3c;
                }
                &:focus {
                  color: #fff;
                  border-color: #16ba3c;
                  background-color: #16ba3c;
                }
              }
            }
          }
          .monitoring {
            :global {
              .ant-btn {
                border: 1px solid #16ba3c;
                background-color: #fff;
                color: #16ba3c;
                &:hover {
                  color: #fff;
                  background-color: #16ba3c;
                  border-color: #16ba3c;
                }
                &:focus {
                  color: #fff;
                  border-color: #16ba3c;
                  background-color: #16ba3c;
                }
              }
            }
          }
          .delete {
            :global {
              .ant-btn {
                border: 1px solid #ff4d4f;
                background-color: #fff;
                color: #ff4d4f;
                &:hover {
                  color: #fff;
                  background-color: #ff4d4f;
                  border-color: #ff4d4f;
                }
                &:focus {
                  color: #fff;
                  border-color: #ff4d4f;
                  background-color: #ff4d4f;
                }
              }
            }
          }
          .result {
            :global {
              .ant-btn {
                border: 1px solid #ba9b16;
                background-color: #fff;
                color: #ba9b16;
                &:hover {
                  color: #fff;
                  background-color: #ba9b16;
                  border-color: #ba9b16;
                }
                &:focus {
                  color: #fff;
                  border-color: #ba9b16;
                  background-color: #ba9b16;
                }
              }
            }
          }
          .upload {
            .upload-wrap {
              display: inline-block;
            }
          }
          .delete,
          .monitoring,
          .result,
          .flow,
          .upload,
          .rest {
            :global {
              .ant-btn {
                border-radius: 4px;
                padding: 4px 7px;
                height: 30px;
                font-size: 13px;
              }
            }
            padding: 0 3px;
          }
          text-align: center;
        }
      }
    }
    .table-thead {
      .th {
        text-align: center;
        font-weight: 500;
        color: #666;
      }
      margin-bottom: 10px;
      border-radius: 4px;
      box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
      height: 46px;
      line-height: 46px;
      background: #fff;
    }
  }
}
